异步处理

[TOC]

一、在异步操作之后才进行同步

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms)
  })
}

async function delayLog(ms, item) {
  await delay(ms)
  console.log(item, new Date())
}

async function processArray(ms, arr) {
  console.log('start')
  for(const item of arr) {
    await delayLog(ms, item)
    console.log('666')
  }
  console.log('Done')
}

processArray(1000, [1,3,5])
console.log('1024')

// Output
// start
// 1024
// 1 Sun Nov 03 2019 23:58:27 GMT+0800 (中国标准时间)
// 666
// 3 Sun Nov 03 2019 23:58:28 GMT+0800 (中国标准时间)
// 666
// 5 Sun Nov 03 2019 23:58:29 GMT+0800 (中国标准时间)
// 666
// Done

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms)
  })
}

async function processArray(ms) {
  console.log(0)
  for (let i = 1; i < 3; i++) {
    await delay(ms)
    console.log(i)
  }
  console.log('3')
}

processArray(1000)
// 0 1 2 3

async function async1() {
  console.log(1);
  await async2();
  console.log(3);
}

async function async2() {
  console.log(2);
}

Promise.resolve().then(() => {
  console.log(4);
});

setTimeout(() => {
  console.log(5);
});

async1();
console.log(6);

// 1 2 6 4 3 5

• async1 函数本身会返回一个 Promise ，同时 await 后面紧跟着 async2 函数返回的 Promise ，console.log(3)其实是在 async2 函数返回的 Promise 的 then 语句中执行的，then 语句本身也会返回一个 Promise 然后追加到微任务队列中，所以在微任务队列中 console.log(3) 在console.log(4)后面。
• async2 成功的时候会返回那个 resolve 的方法。

setTimeout(function(){
    console.log('1')
});

new Promise(function(resolve){
    console.log('2');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('3')
});

console.log('4');
// 2 4 3 1
// new Promise会先执行内部函数